<template>
  <div class="space community-chest" :class="{ active: active }" @click="popup">
    <div class="container">
      <div class="name">Community Chest</div>
      <svg
        :class="`text-${this.color} fill-current h-12 w-12 mx-auto`"
        viewBox="0 0 415.48 415.48"
      >
        <g>
          <path
            d="M398.96,185.72h-15.82V33c0-4.142-3.357-7.5-7.5-7.5H245.988v-18c0-4.142-3.357-7.5-7.5-7.5h-61.497
        c-4.142,0-7.5,3.358-7.5,7.5v18H39.84c-4.142,0-7.5,3.358-7.5,7.5v152.72H16.52c-4.142,0-7.5,3.358-7.5,7.5v214.76
        c0,4.142,3.358,7.5,7.5,7.5H48.2h319.08h31.68c4.143,0,7.5-3.358,7.5-7.5V193.22C406.46,189.078,403.103,185.72,398.96,185.72z
         M391.46,342.421c-5.823,0.662-11.414,2.088-16.68,4.169V200.72h16.68V342.421z M359.78,229.7H251.218v-18.647l108.563-0.003V229.7
        z M236.218,211.49v68.821h-56.957V211.49H236.218z M122.295,196.05c1.081-2.19,2.001-4.436,2.905-6.645
        c1.879-4.594,3.654-8.932,6.309-11.053c2.632-2.101,7.239-2.867,12.116-3.678c4.813-0.801,9.789-1.628,14.457-3.88
        c4.565-2.204,8.255-5.542,11.823-8.771c3.711-3.357,7.216-6.528,10.621-7.301c3.174-0.721,7.606,0.574,12.297,1.946
        c4.518,1.322,9.639,2.82,14.919,2.82c5.28,0,10.401-1.498,14.919-2.82c4.691-1.372,9.121-2.667,12.302-1.945
        c3.4,0.771,6.905,3.943,10.616,7.3c3.567,3.228,7.257,6.566,11.824,8.771c4.666,2.251,9.643,3.079,14.455,3.879
        c4.877,0.811,9.483,1.577,12.112,3.675c2.656,2.123,4.431,6.461,6.309,11.054c0.904,2.21,1.825,4.457,2.906,6.646H122.295z
         M164.261,211.053V229.7H55.7v-18.65l2.047,0.003H164.261z M55.7,244.7h108.561v43.11c0,4.142,3.358,7.5,7.5,7.5h71.957
        c4.143,0,7.5-3.358,7.5-7.5V244.7H359.78v110.208c-14.359,10.628-24.262,26.934-26.381,45.571H82.079
        c-2.119-18.637-12.021-34.942-26.378-45.57V244.7z M184.492,15h46.497v10.5h-46.497V15z M47.34,40.5h129.652h61.497H368.14v145.22
        h-0.859c-4.143,0-7.5,3.358-7.5,7.5v2.83h-47.954c-1.233-1.02-2.155-1.926-2.868-2.821c-1.867-2.337-3.29-5.818-4.798-9.503
        c-2.403-5.877-5.128-12.54-10.833-17.098c-5.68-4.533-12.763-5.711-19.011-6.75c-3.943-0.656-7.669-1.275-10.396-2.591
        c-2.623-1.266-5.371-3.752-8.28-6.385c-4.748-4.296-10.129-9.165-17.356-10.804c-6.972-1.586-13.808,0.413-19.837,2.176
        c-3.896,1.14-7.576,2.217-10.707,2.217c-3.131,0-6.812-1.077-10.708-2.217c-6.029-1.764-12.863-3.763-19.832-2.177
        c-7.232,1.641-12.613,6.509-17.361,10.805c-2.91,2.632-5.658,5.119-8.279,6.384c-2.729,1.317-6.454,1.937-10.397,2.592
        c-6.249,1.039-13.331,2.217-19.015,6.753c-5.703,4.557-8.428,11.218-10.832,17.096c-1.507,3.685-2.93,7.165-4.804,9.513
        c-0.706,0.887-1.626,1.792-2.859,2.811H55.7v-2.83c0-4.142-3.358-7.5-7.5-7.5h-0.86V40.5z M40.7,200.72v145.87
        c-5.266-2.082-10.857-3.508-16.68-4.17V200.72H40.7z M24.02,400.48v-42.942c22.128,3.276,39.665,20.814,42.941,42.942H48.2H24.02z
         M367.28,400.48h-18.763c3.276-22.128,20.814-39.667,42.943-42.942v42.942H367.28z"
          />
          <path
            d="M207.74,97.496c4.143,0,7.5-3.358,7.5-7.5v-18c0-4.142-3.357-7.5-7.5-7.5c-4.142,0-7.5,3.358-7.5,7.5v18
        C200.24,94.138,203.598,97.496,207.74,97.496z"
          />
          <path
            d="M153.901,105.967c1.196,2.888,3.989,4.631,6.932,4.631c0.957,0,1.929-0.185,2.868-0.573c3.827-1.585,5.644-5.973,4.058-9.8
        l-10.49-25.32c-1.585-3.827-5.974-5.644-9.799-4.058c-3.827,1.585-5.644,5.973-4.058,9.8L153.901,105.967z"
          />
          <path
            d="M113.645,132.867c1.465,1.466,3.385,2.199,5.305,2.199c1.918,0,3.837-0.731,5.301-2.195
        c2.93-2.928,2.932-7.676,0.004-10.606l-12.73-12.74c-2.928-2.93-7.676-2.932-10.606-0.004c-2.93,2.928-2.932,7.676-0.004,10.606
        L113.645,132.867z"
          />
          <path
            d="M66.29,165.874l25.32,10.49c0.939,0.389,1.911,0.573,2.868,0.573c2.942,0,5.735-1.744,6.932-4.631
        c1.585-3.827-0.231-8.214-4.058-9.799l-25.32-10.49c-3.827-1.586-8.214,0.231-9.799,4.058
        C60.646,159.902,62.463,164.289,66.29,165.874z"
          />
          <path
            d="M314.071,172.306c1.196,2.888,3.988,4.631,6.932,4.631c0.957,0,1.929-0.184,2.868-0.573l25.32-10.49
        c3.826-1.585,5.644-5.973,4.058-9.799c-1.586-3.827-5.971-5.644-9.8-4.058l-25.32,10.49
        C314.303,164.093,312.485,168.48,314.071,172.306z"
          />
          <path
            d="M296.53,135.066c1.92,0,3.841-0.733,5.306-2.199l12.729-12.74c2.928-2.93,2.926-7.679-0.005-10.607
        c-2.929-2.927-7.678-2.927-10.606,0.004l-12.729,12.74c-2.928,2.93-2.926,7.679,0.005,10.607
        C292.693,134.334,294.611,135.066,296.53,135.066z"
          />
          <path
            d="M251.78,110.025c0.938,0.389,1.91,0.573,2.867,0.573c2.943,0,5.735-1.744,6.932-4.632l10.489-25.32
        c1.586-3.827-0.231-8.214-4.059-9.799c-3.824-1.585-8.214,0.231-9.799,4.059l-10.489,25.32
        C246.136,104.052,247.953,108.439,251.78,110.025z"
          />
          <path
            d="M207.739,268.312c12.357,0,22.411-10.054,22.411-22.412s-10.054-22.412-22.411-22.412
        c-12.358,0-22.412,10.054-22.412,22.412S195.381,268.312,207.739,268.312z M207.739,238.489c4.087,0,7.411,3.325,7.411,7.412
        s-3.324,7.412-7.411,7.412s-7.412-3.325-7.412-7.412S203.652,238.489,207.739,238.489z"
          />
        </g>
      </svg>
      <div class="instructions">Follow instructions on top card</div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      name: "Community Chest",
      active: false,
      color: "blue-600",
    };
  },
  computed: {
    ...mapGetters({
      player: "getCurrentPlayer",
      card: "getCommunityChest",
      isCurrentPlayer: "getSelfIsCurrentPlayer"
    }),
  },
  methods: {
    async popup() {
      await this.$swal({
        content: this.$strToHtml(
          `<div class="flex flex-row justify-center p-4"><svg
                class="text-${this.color} fill-current h-12 w-12 mx-auto"
                viewBox="0 0 415.48 415.48"
            >
                <g>
                    <path
                        d="M398.96,185.72h-15.82V33c0-4.142-3.357-7.5-7.5-7.5H245.988v-18c0-4.142-3.357-7.5-7.5-7.5h-61.497
        c-4.142,0-7.5,3.358-7.5,7.5v18H39.84c-4.142,0-7.5,3.358-7.5,7.5v152.72H16.52c-4.142,0-7.5,3.358-7.5,7.5v214.76
        c0,4.142,3.358,7.5,7.5,7.5H48.2h319.08h31.68c4.143,0,7.5-3.358,7.5-7.5V193.22C406.46,189.078,403.103,185.72,398.96,185.72z
         M391.46,342.421c-5.823,0.662-11.414,2.088-16.68,4.169V200.72h16.68V342.421z M359.78,229.7H251.218v-18.647l108.563-0.003V229.7
        z M236.218,211.49v68.821h-56.957V211.49H236.218z M122.295,196.05c1.081-2.19,2.001-4.436,2.905-6.645
        c1.879-4.594,3.654-8.932,6.309-11.053c2.632-2.101,7.239-2.867,12.116-3.678c4.813-0.801,9.789-1.628,14.457-3.88
        c4.565-2.204,8.255-5.542,11.823-8.771c3.711-3.357,7.216-6.528,10.621-7.301c3.174-0.721,7.606,0.574,12.297,1.946
        c4.518,1.322,9.639,2.82,14.919,2.82c5.28,0,10.401-1.498,14.919-2.82c4.691-1.372,9.121-2.667,12.302-1.945
        c3.4,0.771,6.905,3.943,10.616,7.3c3.567,3.228,7.257,6.566,11.824,8.771c4.666,2.251,9.643,3.079,14.455,3.879
        c4.877,0.811,9.483,1.577,12.112,3.675c2.656,2.123,4.431,6.461,6.309,11.054c0.904,2.21,1.825,4.457,2.906,6.646H122.295z
         M164.261,211.053V229.7H55.7v-18.65l2.047,0.003H164.261z M55.7,244.7h108.561v43.11c0,4.142,3.358,7.5,7.5,7.5h71.957
        c4.143,0,7.5-3.358,7.5-7.5V244.7H359.78v110.208c-14.359,10.628-24.262,26.934-26.381,45.571H82.079
        c-2.119-18.637-12.021-34.942-26.378-45.57V244.7z M184.492,15h46.497v10.5h-46.497V15z M47.34,40.5h129.652h61.497H368.14v145.22
        h-0.859c-4.143,0-7.5,3.358-7.5,7.5v2.83h-47.954c-1.233-1.02-2.155-1.926-2.868-2.821c-1.867-2.337-3.29-5.818-4.798-9.503
        c-2.403-5.877-5.128-12.54-10.833-17.098c-5.68-4.533-12.763-5.711-19.011-6.75c-3.943-0.656-7.669-1.275-10.396-2.591
        c-2.623-1.266-5.371-3.752-8.28-6.385c-4.748-4.296-10.129-9.165-17.356-10.804c-6.972-1.586-13.808,0.413-19.837,2.176
        c-3.896,1.14-7.576,2.217-10.707,2.217c-3.131,0-6.812-1.077-10.708-2.217c-6.029-1.764-12.863-3.763-19.832-2.177
        c-7.232,1.641-12.613,6.509-17.361,10.805c-2.91,2.632-5.658,5.119-8.279,6.384c-2.729,1.317-6.454,1.937-10.397,2.592
        c-6.249,1.039-13.331,2.217-19.015,6.753c-5.703,4.557-8.428,11.218-10.832,17.096c-1.507,3.685-2.93,7.165-4.804,9.513
        c-0.706,0.887-1.626,1.792-2.859,2.811H55.7v-2.83c0-4.142-3.358-7.5-7.5-7.5h-0.86V40.5z M40.7,200.72v145.87
        c-5.266-2.082-10.857-3.508-16.68-4.17V200.72H40.7z M24.02,400.48v-42.942c22.128,3.276,39.665,20.814,42.941,42.942H48.2H24.02z
         M367.28,400.48h-18.763c3.276-22.128,20.814-39.667,42.943-42.942v42.942H367.28z"
                    />
                    <path
                        d="M207.74,97.496c4.143,0,7.5-3.358,7.5-7.5v-18c0-4.142-3.357-7.5-7.5-7.5c-4.142,0-7.5,3.358-7.5,7.5v18
        C200.24,94.138,203.598,97.496,207.74,97.496z"
                    />
                    <path
                        d="M153.901,105.967c1.196,2.888,3.989,4.631,6.932,4.631c0.957,0,1.929-0.185,2.868-0.573c3.827-1.585,5.644-5.973,4.058-9.8
        l-10.49-25.32c-1.585-3.827-5.974-5.644-9.799-4.058c-3.827,1.585-5.644,5.973-4.058,9.8L153.901,105.967z"
                    />
                    <path
                        d="M113.645,132.867c1.465,1.466,3.385,2.199,5.305,2.199c1.918,0,3.837-0.731,5.301-2.195
        c2.93-2.928,2.932-7.676,0.004-10.606l-12.73-12.74c-2.928-2.93-7.676-2.932-10.606-0.004c-2.93,2.928-2.932,7.676-0.004,10.606
        L113.645,132.867z"
                    />
                    <path
                        d="M66.29,165.874l25.32,10.49c0.939,0.389,1.911,0.573,2.868,0.573c2.942,0,5.735-1.744,6.932-4.631
        c1.585-3.827-0.231-8.214-4.058-9.799l-25.32-10.49c-3.827-1.586-8.214,0.231-9.799,4.058
        C60.646,159.902,62.463,164.289,66.29,165.874z"
                    />
                    <path
                        d="M314.071,172.306c1.196,2.888,3.988,4.631,6.932,4.631c0.957,0,1.929-0.184,2.868-0.573l25.32-10.49
        c3.826-1.585,5.644-5.973,4.058-9.799c-1.586-3.827-5.971-5.644-9.8-4.058l-25.32,10.49
        C314.303,164.093,312.485,168.48,314.071,172.306z"
                    />
                    <path
                        d="M296.53,135.066c1.92,0,3.841-0.733,5.306-2.199l12.729-12.74c2.928-2.93,2.926-7.679-0.005-10.607
        c-2.929-2.927-7.678-2.927-10.606,0.004l-12.729,12.74c-2.928,2.93-2.926,7.679,0.005,10.607
        C292.693,134.334,294.611,135.066,296.53,135.066z"
                    />
                    <path
                        d="M251.78,110.025c0.938,0.389,1.91,0.573,2.867,0.573c2.943,0,5.735-1.744,6.932-4.632l10.489-25.32
        c1.586-3.827-0.231-8.214-4.059-9.799c-3.824-1.585-8.214,0.231-9.799,4.059l-10.489,25.32
        C246.136,104.052,247.953,108.439,251.78,110.025z"
                    />
                    <path
                        d="M207.739,268.312c12.357,0,22.411-10.054,22.411-22.412s-10.054-22.412-22.411-22.412
        c-12.358,0-22.412,10.054-22.412,22.412S195.381,268.312,207.739,268.312z M207.739,238.489c4.087,0,7.411,3.325,7.411,7.412
        s-3.324,7.412-7.411,7.412s-7.412-3.325-7.412-7.412S203.652,238.489,207.739,238.489z"
                    />
                </g>
            </svg></div>
                <div class="swal-title text-${this.color}">${this.name}</div>
                <div class="flex flex-col text-center">
                <div class="flex flex-row justify-center text-xl py-1 font-medium">
                            <div>
                            ${this.card.message.split("–")[0]}
                            </div>
                </div>
                <div class="flex flex-row justify-center text-lg py-2"><div>` +
            this.card.message
              .split("–")
              .slice(1)
              .join(
                '</div></div><div class="flex flex-row justify-center text-lg py-2"><div>'
              ) +
            `</div></div></div>`
        ),
        className: "normal-case",
      });
      if (this.isCurrentPlayer) {
        this.$store.dispatch("drawCard", "communityChest");
      }
    },
  },
};
</script>
